<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>AngularJS&middot; TODO APP</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.css">
    <style>
        body{
          font-family: "helvetica neue",arial,sans-serif;
          font-size: 14px;
          color: #444;
        }
        .demo{
            margin-bottom:10px;
            border-bottom:1px solid #1b926c;
            padding:60px;
        }
        .done-true {
            text-decoration: line-through;
            color: grey;
        }
        .unstyled{
          list-style: none;
        }
        .item-todo{
          font-size:16px;
          font-weight:bold;
        }
    </style>
</head>
<body>

 <div class="container">
     <div class="row">
         <nav class="navbar navbar-default navbar-static-top">
             <div class="container-fluid">
                 <div class="navbar-header">
                     <a class="navbar-brand" href="../index.html">首页</a>
                 </div>
                 <ul class="nav navbar-nav">
                    <li class="active"><a href="javascript:void(0)">Link</a></li>
                    <li><a href="javascript:void(0)">Link2</a></li>
                 </ul>
             </div>
         </nav>
     </div>

     <div class="demo" ng-app="MyApp_TODO">
          <h3>AngularJS TODO示例</h3>
          <div ng-controller="TodoController">
              <span>总共 <b>{{todos.length}}</b> 项TODO,剩下 <b>{{remaining()}} </b>个</span>
              [ <a href="" ng-click="archive()">删除已完成</a> ]
              <ul class="unstyled">
                  <li class="item-todo" ng-repeat="todo in todos">
                      <input type="checkbox" ng-model="todo.done">
                      <span class="done-{{todo.done}}">{{todo.text}}</span>
                  </li>
              </ul>
              <form class="form-inline" ng-submit="addTodo()">
                  <div class="form-group">
                    <input class="form-control" type="text" ng-model="newTodoText"  size="30" placeholder="add new todo here">
                    <input class="btn btn-primary" type="submit" value="add">
                  </div>
              </form>
          </div>
     </div>
     <br/>
 </div>
</body>
</html>
<script src="http://cdn.bootcss.com/angular.js/1.3.8/angular.js" type="text/javascript"></script>
<script>
        var todoAPP=angular.module('MyApp_TODO',[]);
        todoAPP.controller('TodoController', ['$scope', function($scope) {
                    $scope.todos = [
                        {text:'初步学习Angular', done:true},
                        {text:'使用Angular创建应用', done:false}];

                    $scope.addTodo = function() {
                        $scope.todos.push({text:$scope.newTodoText, done:false});
                        $scope.newTodoText = '';
                    };

                    $scope.remaining = function() {
                        var count = 0;
                        angular.forEach($scope.todos, function(todo) {
                            count += todo.done ? 0 : 1;
                        });
                        return count;
                    };

                    $scope.archive = function() {
                        var oldTodos = $scope.todos;
                        $scope.todos = [];
                        angular.forEach(oldTodos, function(todo) {
                            if (!todo.done) $scope.todos.push(todo);
                        });
                    };
                }]);
    </script>
